<template>
    <view class="u-content pb-2">
        <uv-sticky class="bg-white">
            <view class="p-2">
                <uv-search placeholder="搜索..." :showAction="false" v-model="searchForm.search" clearabled
                    @search="onSearch"></uv-search>
                <uv-tabs :activeStyle="{ color: themeColor }" :scrollable="false" :lineColor="themeColor" :list="tabs"
                    @click="onTabChange" :current="curTab"></uv-tabs>
            </view>
        </uv-sticky>
        <uv-list v-if="pagedList.rows.length" @scrolltolower="nextPage">
            <uv-list-item v-for="item in pagedList.rows" :key="item.id">
                <view class="bg-white shadow drop-shadow radius m-4 mb-5 p-4">
                    <view class="flex align-center">
                        <view>
                            <uv-avatar :src="item.avatar || item.shopLogo" randomBgColor size="64"></uv-avatar>
                        </view>
                        <view class="ml-2 flex-sub">
                            <view class="text-bold">{{ item.nickName || item.name || item.shopName }}</view>
                            <view class="mt-2 flex">
                                <view>作品：{{ item.creations }}</view>
                                <view class="ml-2">粉丝：{{ item.fans }}</view>
                            </view>
                        </view>
                        <uv-icon v-if="!item.subscribing" :name="item.subscribed ? 'heart-fill' : 'heart'" size="32"
                            :color="item.subscribed ? 'error' : 'info'" @click="subscribeHandle(item)"></uv-icon>
                        <uv-loading-icon v-else mode="circle"></uv-loading-icon>
                    </view>
                </view>
            </uv-list-item>
            <uv-load-more :status="listLoading" class="mt-4" v-if="!loading" />
        </uv-list>
        <uv-empty mode="list" icon="/static/empty/list.png" text="暂无数据" marginTop="55%" v-else>
        </uv-empty>
    </view>
</template>
<script setup lang="ts">
import { ref, reactive, computed } from 'vue';
import { onLoad, onReady, onShow, onPullDownRefresh } from '@dcloudio/uni-app';
import { subscribes, toggleSubscribe } from '@/services/profile';
import { themeColor, convertToJson, dateToTimeStamp } from '@/utils/index';
import { debounce } from 'throttle-debounce'

const curTab = ref(0)

const tabs = ref([{
    id: 1,
    name: '我的粉丝'
}, {
    id: 0,
    name: '我的关注'
}])

const listLoading = ref('loading')
const loading = ref(true)

const subscribing = ref(false)

const searchForm = reactive({
    type: 0,
    page: 1,
    limit: 10,
    search: '',
})

const pagedList = reactive({
    hasNextPage: true,
    totalItemCount: 0,
    rows: []
})

onLoad((options) => {
    if (options.type >= 0) {
        searchForm.type = Number(options.type)
    }
})


onShow(() => {
    loading.value = true
    let index = tabs.value.findIndex(p => p.id == searchForm.type)
    if (index == -1) {
        index = 0
    }
    onTabChange({ index, id: tabs.value[index].id })
})

const ebounceToggleSubscribe = debounce(1500, (item) => {
    toggleSubscribe(item.id).then((data) => {
        uni.showToast({
            title: data ? '已关注' : '已取消关注',
            icon: 'none'
        })
    }).catch(() => { }).finally(() => { item.subscribing = false })
})

const subscribeHandle = (item) => {
    item.subscribing = true
    ebounceToggleSubscribe(item)
}

const onSearch = () => {
    refresh()
}


onPullDownRefresh(() => {
    refresh()
})

const refresh = () => {
    searchForm.page = 1
    getList()
}


const onTabChange = ({ index, id }) => {
    curTab.value = index
    searchForm.type = id
    refresh()
}



const nextPage = () => {
    if (!pagedList.hasNextPage) {
        return
    }
    searchForm.page++
    getList()
}

const getList = () => {
    listLoading.value = 'loading'
    subscribes(searchForm).then(({
        rows,
        hasNextPage
    }) => {
        rows.forEach(r => {
            r.subscribing = false
        })
        listLoading.value = hasNextPage ? 'loadmore' : 'nomore'
        pagedList.hasNextPage = hasNextPage
        if (searchForm.page == 1) {
            pagedList.rows = rows
        } else {
            pagedList.rows = [...pagedList.rows, ...rows]
        }

    }).catch(() => { }).finally(() => {
        setTimeout(() => {
            loading.value = false
        }, 1000)
        uni.stopPullDownRefresh()
    })
}
</script>